<template>
  <view class="bg-[#f5f7fa] min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <!-- <PageHeader title="发布任务" :showBack="true" :onlyBack="true" /> -->
    <view class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <view class="flex items-center px-[32rpx] py-[24rpx]">
        <nut-button
          size="small"
          type="default"
          plain
          class="mr-[16rpx]"
          @click="handleBack"
        >
          <template #icon>
            <IconFont name="left" size="24" />
          </template>
        </nut-button>
       
        <view class="flex items-center">
          <image
            :src="chatInfo.avatar"
            class="w-[60rpx] h-[60rpx] rounded-[30rpx] mr-[12rpx]"
            mode="aspectFill"
          />
          <view>
            <text class="text-[28rpx] font-bold text-[#333]">{{ chatInfo.userName }}</text>
            <text class="text-[22rpx] text-[#999] block">{{ chatInfo.status }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <view class="flex-1 px-[32rpx] pt-[150rpx] pb-[150rpx] overflow-y-auto">
      <!-- 欢迎消息 -->
      <view class="flex justify-center mb-[32rpx]">
        <view class="bg-blue-50 rounded-[20rpx] px-[24rpx] py-[12rpx]">
          <text class="text-[24rpx] text-blue-500">开始与 {{ chatInfo.userName }} 的对话</text>
        </view>
      </view>

      <!-- 聊天消息列表 -->
      <view class="flex flex-col gap-y-[24rpx]">
        <view
          v-for="(message, index) in messages"
          :key="index"
          class="flex"
          :class="message.isSelf ? 'justify-end' : 'justify-start'"
        >
          <view
            class="max-w-[70%] rounded-[20rpx] px-[24rpx] py-[16rpx]"
            :class="getMessageClass(message)"
          >
            <text class="text-[26rpx] leading-[1.5]">{{ message.content }}</text>
            <text class="text-[20rpx] opacity-70 block mt-[8rpx]">{{ message.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 输入框区域 - 固定在底部 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-[#f0f0f0] px-[32rpx] py-[24rpx] z-50">
      <view class="flex items-center gap-x-[16rpx]">
        <view class="flex-1 bg-[#f5f5f5] rounded-[24rpx] px-[24rpx] py-[16rpx]">
          <input
            v-model="inputMessage"
            class="text-[26rpx] text-[#333] w-full"
            placeholder="输入消息..."
            @confirm="handleSendMessage"
          />
        </view>
        <nut-button
          size="small"
          type="primary"
          class="bg-blue-500 border-none rounded-[24rpx] px-[24rpx] py-[16rpx]"
          @click="handleSendMessage"
        >
          <IconFont font-class-name="iconfont" class-prefix="icon" name="tuiguangzhongxin" color="#fff" size="16" />
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
// import { Button as nutButton } from "@nutui/nutui-taro";

/**
 * 聊天页面
 * 用于与申请用户进行沟通
 */

// 聊天信息
const chatInfo = ref({
  userId: "",
  userName: "用户",
  avatar: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
  status: "在线",
});

// 输入消息
const inputMessage = ref("");

// 聊天消息列表
const messages = ref([
  {
    content: "您好！我是申请您发布任务的用户，请问还有机会吗？",
    time: "10:30",
    isSelf: false,
  },
  {
    content: "您好！感谢您的申请，我们正在审核中，请稍等。",
    time: "10:32",
    isSelf: true,
  },
  {
    content: "好的，我会耐心等待您的回复。",
    time: "10:33",
    isSelf: false,
  },
]);

/**
 * 返回上一页
 */
const handleBack = () => {
  Taro.navigateBack();
};

/**
 * 获取消息样式类
 * @param {Object} message - 消息对象
 * @returns {string} 样式类名
 */
const getMessageClass = (message) => {
  const baseClass = "max-w-[70%] rounded-[20rpx] px-[24rpx] py-[16rpx]";
  
  if (message.isSelf) {
    return `${baseClass} bg-blue-500 text-white`;
  } else {
    return `${baseClass} bg-white text-gray-800 shadow-sm`;
  }
};

/**
 * 发送消息
 */
const handleSendMessage = () => {
  if (!inputMessage.value.trim()) {
    return;
  }

  // 添加新消息
  messages.value.push({
    content: inputMessage.value,
    time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    isSelf: true,
  });

  // 清空输入框
  inputMessage.value = "";

  // 模拟对方回复
  setTimeout(() => {
    messages.value.push({
      content: "收到您的消息，我会尽快回复！",
      time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
      isSelf: false,
    });
  }, 1000);
};

// 页面加载时获取参数
onMounted(() => {
  const pages = Taro.getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const { userId, userName } = currentPage.options;
  
  if (userId && userName) {
    chatInfo.value.userId = userId;
    chatInfo.value.userName = decodeURIComponent(userName);
  }
});
</script> 